import React, { Component } from 'react';
import { Button, Modal, Form, Drawer, Divider } from 'antd';
import '@/assets/css/settings';
import * as ApplyAcceptance from '../../axios/ApplyAcceptance'
import { baseUrl } from '../../config'
import { BasicLayout, BasicLayoutSearch } from '../../components/BasicLayout';
import { BasicPagination, isInvalidObject, TableCustomize, openSuccessModal, openModalMessage, compareDate, compareString } from '../../components/TableCustomize'
import { withPermission } from '../../components/withpermission';
import { withRouter } from 'react-router';
import AddForm2 from './AddForm3';
import SearchForm from './SearchForm1';
// import AddForm from './AddForm';
// import ProductionForm from './ProductionForm';
const CreateButton = withPermission(Button, 'create')
class Demo extends Component {
    state = {
        dataSource: [],
        visible: false,
        advanced: false,
        searchItem: {},
        modalTitle: '新增',
        formData: {},
        drawerVisible: false,
        drawerVisible1: false,
        drawerTitle: '新增',
        pageSize: 10,
        pageNum: 1,
        total: 40,
        columns: [
            {
                title: '序号',
                dataIndex: 'id',
                width: 200,
                render: (text, record, index) => `${index + 1}`,
            },

            {
                title: '文件名称',
                // width: 200,
                dataIndex: 'agreementName',
                editable: true
            },
            {
                title: '修改时间',
                // width: 200,
                // allowEllipsis: true,
                dataIndex: 'updateTime',
            },
            {
                title: '最后修改人',
                // width: 200,
                dataIndex: 'updaterId',
                // sorter: (a, b) => compareNum(a.sort, b.sort)
            },
            {
                title: '操作',
                // width: 200,
                dataIndex: 'opts',
                align: 'center',
                render: (text, record) => <>
                    {/* <a onClick={() => this.openTGXX(record)}>视频</a> */}
                    {/* <Divider type="vertical" /> */}
                    <a onClick={() => this.openDetail(record)}>预览</a>
                    <Divider type="vertical" />
                    <a onClick={() => this.openTZJS(record)}>重新上传</a>
                    <Divider type="vertical" />
                    <a onClick={() => this.remove(record.id)}>删除</a>
                </>
            }
        ],
        previewVisible: false,
        previewImage: '',
        pathProps: {},
        drawerVisible1: false,
        drawerTitle1: '技术协议',
        formData1: {}
    };
    remove = (id) => {
        // const { searchItem } = this.state
        Modal.confirm({
            title: '确定要删除数据吗？',
            centered: true,
            okText: '取消',
            cancelText: '确定',
            onOk() {
                ApplyAcceptance.removeByIdAgreement(id).then(res => {
                    if (res.data.code === 200) {
                        openModalMessage('success', res.data.msg)
                        this.fetch(this.state.pageNum, this.state.pageSize)
                        // this.handleCancel()
                    } else {
                        openModalMessage('warning', res.data.msg)
                    }
                    // this.setState({ loadingBtn: false })
                }).catch(err => {
                    // this.setState({ loadingBtn: false })
                    console.log(err.data.msg)
                })
            },
            onCancel: async () => {
                console.log('Cancel')
            }
        });

    }
    componentDidMount() {
        // console.log(this.props.location)
        if (!this?.props || !this.props?.location || !this.props?.location?.data) {
            this.props.history.go(-1)
        } else {
            this.setState({ pathProps: this.props?.location?.data })
            this.fetch();
        }
    }
    //初始化加载数据
    fetch = (pageNum = 1, pageSize = 10) => {
        this.setState({ loading: true })
        const { searchItem } = this.state
        searchItem.pageNum = pageNum
        searchItem.pageSize = pageSize
        ApplyAcceptance.Agreement(searchItem).then(res => {
            this.setState({ loading: false })
            console.log('列表', res)
            if (res.data.code !== 200) {
                openModalMessage('warning', res.data.msg)
                return
            }
            this.setState({
                dataSource: res.data.data,
                total: res.data.total,
                pageNum: res.data.pageNum,
                pageSize: res.data.pageSize,
                selectedRowKeys: [],
                selectedRows: [],
                row: []
            })
        }).catch(err => {
            // openModalMessage('error', err.message)
            console.log(err)
        })
    }
    openDetail = (record) => {
        this.setState({ previewImage: record.picUrl, previewVisible: true })
    }
    openTZJS = (record) => {

        let formData1 = { ...record }
        this.setState({
            formData1,
            drawerVisible1: true
        })
    }
    onHandleOk1 = () => {
        const { validateFields } = this.formDrawer1;
        const { formData, operateType } = this.state;

        validateFields(async (err, values) => {
            if (!err) {
                this.setState({ loadingBtn: true })
                console.log('参数', values)
                values.updaterId = localStorage.getItem('userId')
                ApplyAcceptance.editAgreement(values).then(res => {
                    if (res.data.code === 200) {

                        openSuccessModal('success', res.data.msg)
                        this.fetch()
                        this.handleCancel1()
                    } else {
                        openModalMessage('warning', res.data.msg)
                    }
                    this.setState({ loadingBtn: false })
                }).catch(err => {
                    this.setState({ loadingBtn: false })
                })


            }
        })
    }
    handleSearch = values => {
        console.log(values)

        if (values?.updateTime) {
            // values.updateTime = values.updateTime.format('YYYY-MM-DD hh:mm:ss')
            values.updateStarTime = values?.updateTime[0]?.format('YYYY-MM-DD hh:mm:ss')
            values.updateEndTime = values?.updateTime[1]?.format('YYYY-MM-DD hh:mm:ss')
        } else {
            values.updateStarTime = ''
            values.updateEndTime = ''
        }
        this.setState({ searchItem: values }, () => { this.fetch() });
    };
    handleCancel1 = e => {
        this.formDrawer1 && this.formDrawer1.resetFields();
        this.setState({
            drawerVisible1: false,
        });
    };
    render() {
        const { formData1, loading, dataSource, previewVisible, previewImage, columns, pageNum, pageSize, total, drawerVisible1, drawerTitle1 } = this.state;
        return (
            <div>

                <BasicLayoutSearch>
                    <SearchForm onSearch={this.handleSearch}
                    />
                </BasicLayoutSearch>
                <BasicLayout buttons={[]} name="技术协议验收" icon="table">
                    <TableCustomize columns={columns} rowKey={(record) => record.id} dataSource={dataSource} pagination={false} loading={loading} allowDrafting={true} allowRowEdit allowEditable={this.loadData} />
                    <BasicPagination pageNum={pageNum} pageSize={pageSize} total={total} loadData={this.fetch} />
                </BasicLayout>

                <Modal visible={previewVisible} footer={null} onCancel={() => this.setState({ previewVisible: false, previewImage: '' })}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                </Modal>
                <Drawer width={400} visible={drawerVisible1} title={drawerTitle1} onClose={this.handleCancel1}>
                    <AddForm2
                        formData={formData1}
                        onOk={this.onHandleOk1}
                        ref={node => (this.formDrawer1 = node)}
                        onClose={this.handleCancel1}
                    // operateType={this.state.operateType}
                    // ModelList={this.state.ModelList}
                    // onchangModel={this.onchangModel}
                    />
                    <div
                        style={{
                            position: 'absolute',
                            right: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={this.handleCancel1} style={{ marginRight: 10 }}>{'取消'}</Button>
                        <Button type="primary" onClick={this.onHandleOk1}>
                            {'确认'}
                        </Button>
                    </div>
                </Drawer>

            </div>
        );
    }
}
export default Form.create()(withRouter(Demo));